<template>
  <scroll-view
    v-if="scrollFlag"
    class="content"
    :style="{ height }"
    :enable-back-to-top="toTop"
    scroll-y
    refresher-background="#f3f3f3"
    refresher-enabled
    :refresher-triggered="triggered"
    @refresherrefresh="getData(2)"
    @scrolltolower="getData(3)"
  >
    <view class="wrap">
      <view v-for="(item, index) in list" :key="index">
        <slot :item="item" :index="index"></slot>
      </view>
    </view>
    <view class="load-more" @click="retry" v-show="list.length">
      {{
        noMore
          ? "没有更多啦！"
          : loadError
          ? "加载失败，点击重试！"
          : "加载中..."
      }}
    </view>
    <nodata-refresh :width="width" ref="nodataRefresh" @refresh="getData(1)" />
  </scroll-view>
  <view v-else class="content">
    <view class="wrap">
      <view v-for="(item, index) in list" :key="index">
        <slot :item="item" :index="index"></slot>
      </view>
    </view>
    <view class="load-more" @click="retry" v-show="list.length">
      {{
        noMore
          ? "没有更多啦！"
          : loadError
          ? "加载失败，点击重试！"
          : "加载中..."
      }}
    </view>
    <nodata-refresh
      :height="height"
      :width="width"
      ref="nodataRefresh"
      @refresh="getData(1)"
    />
  </view>
</template>

<script>
import nodataRefresh from "@/components/nodata-refresh/nodata-refresh.vue";

export default {
  components: { nodataRefresh },
  props: {
    scrollFlag: {
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
      default: "100vw",
    },
    height: {
      type: String,
      default: "100vh",
    },
    toTop: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      token: uni.getStorageSync("token"),
      list: [],
      triggered: false,
      pageNo: 1,
      loading: false,
      loadError: false,
      noMore: false,
    };
  },
  created() {},
  methods: {
    setData(data = false, noMore = false) {
      uni.stopPullDownRefresh();
      this.triggered = false;
      this.loading = false;
      this.noMore = noMore;
      if (data) {
        if (this.pageNo == 1) {
          this.list = [];
        }
        this.list = this.list.concat(data);
        this.pageNo += 1;
        this.$refs.nodataRefresh.show(this.list.length ? false : "noData");
      } else {
        if (this.pageNo > 1) {
          this.loadError = true;
        } else {
          this.$refs.nodataRefresh.show("error");
        }
      }
    },
    retry() {
      if (this.loadError) {
        this.getData(3);
      }
    },
    //type:1首次加载，2下拉刷新，3加载更多
    getData(type = 1) {
      console.log(type);
      if (this.loading || (type == 3 && this.noMore)) {
        return;
      }
      this.loading = true;
      if (type == 2) {
        this.triggered = true;
        this.noMore = false;
        this.pageNo = 1;
      } else if (type == 1) {
        this.$refs.nodataRefresh.show("loading");
        this.noMore = false;
        this.pageNo = 1;
      }
      if (this.pageNo) {
        this.loadMore = true;
      }
      this.$util.requestLodingType = false;
      this.loadError = false;
      this.$emit("getData", { pageNo: this.pageNo });
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  .wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .load-more {
    width: 100%;
    line-height: 100rpx;
    text-align: center;
  }
}
</style>
